<template>
	<view>
		<view v-for="(item,index) in text" :key="index" @click="change(item)">
			<view class="flex frame">
				<span>{{item.txt}}</span>
				<image v-if="item.show" src = "../../static/方向下.png" mode=""></image>
				<image  v-else src = "../../static/direction.png" mode=""></image>
			</view>
			<view class="showItem">
				<p v-if="item.show" class="showItem-p">{{item.text}}</p>
			</view>
		</view>
		<view class="footer">
			<a href="#">联系人工客服</a>
			<p>在线时间：工作日9:00-12:00 13:00~18:00</p>
		</view>
	</view>
</template>

<script>
	import helpData from '../../common/help/help.js';//朋友圈数据
	export default {
		data() {
			return {
				text: helpData,
				no: true
			}
		},
		methods: {
			change(item) {
				this.$set(item, "show", item.show ? false : true) 
			}
		}
	}
</script>

<style>
	body {
		background-color: #ffffff;
	}
	.flex {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.frame {
		margin: 30rpx 30rpx 0;
		background-color: #f9f9f9;
		height: 90rpx;
	}
	.frame span {
		font-weight: bold;
		padding: 20rpx;
		color: #35363a;
		font-size: 30rpx;
	}
	.frame image {
		padding: 20rpx;
		height: 30rpx;
		width: 30rpx;
	}
	.showItem {
		margin: 0 30rpx;
		background-color: #f9f9f9;
		letter-spacing: 2rpx;
	}
	.showItem-p {
		padding: 20rpx;
		font-size: 29rpx;
	}
	.footer {
		width: 100%;
		position: absolute;
		top: 750rpx;
		border-top: 1rpx solid #f8f8f8;
		padding-top: 300rpx;
		text-align: center;
	}
	.footer a {
		color: #007AFF;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		padding: 40rpx 0 20rpx;
	}
	.footer p {
		text-align: center;
		padding-bottom: 24rpx;
	}
</style>
